$(function(){
				var lis = $("#litimgUl li")
				lis[0].className = 'active';
				for(var j=0;j<lis.length;j++){
					lis[j].index = j;
					lis[j].onmouseenter = function(){
						//console.log($(lis[this.index]).find('img').attr('src'))
						$('#showImgBox').find('img').attr("src",$(lis[this.index]).find('img').attr('src'))
						$('#showDetails').find('img').attr("src",$(lis[this.index]).find('img').attr('src'))
						
						for(var k=0;k<lis.length;k++){
							lis[k].className = '';
						}
						this.className = 'active1';
						
					}	
				}
	
				var box = document.getElementById('j-producthead');
				var showImgBox = document.getElementById('showImgBox');
				var mask = document.getElementsByClassName('shadow')[0];
				var showDetails = document.getElementById('showDetails');
				var bigImg = showDetails.children[0];
				
				showImgBox.onmouseenter = function(){
					mask.style.display = 'block';
					showDetails.style.display = 'block';
				}
				showImgBox.onmouseleave = function(){
					mask.style.display = 'none';
					showDetails.style.display = 'none';
				}
				showImgBox.onmousemove = function(evt){
					var e = evt || window.event;
					var x = e.pageX - mask.offsetWidth/2 - box.offsetLeft;
					var y = e.pageY - mask.offsetHeight/2 - box.offsetTop;
					
					
					if(x<0){
                   		x = 0;
	                }else if(x > showImgBox.offsetWidth - mask.offsetWidth){
	                    x = showImgBox.offsetWidth - mask.offsetWidth
	                }
	
	                if(y<0){
	                    y = 0;
	                }else if(y > showImgBox.offsetWidth - mask.offsetWidth){
	                    y = showImgBox.offsetWidth - mask.offsetWidth
	                }
	                mask.style.left = x +'px';
                	mask.style.top = y +'px'
                	
                	bigImg.style.left = -2*x +'px';
					bigImg.style.top = -2*y +'px';
	                
				}
				
				$('#nav-list').find('a').on('click',function(){
				$('#nav-list').find('a').css("color","#fff")
				$(this).css("color","#1587ea")
		
	});
				
	$(function () {

    //1.li点击事件

    $('#menu li').bind('click',function (evt) {

		console.log(this);//原生的li
        //li 在同辈元素的位置  下标
        console.log($(this).index())
        // console.log(this)



           //2.先清空 所有li 的 class
//         $('#menu li').removeClass('active');
//         $(this).addClass('active');

           

           $('#menu li').removeClass('active').eq($(this).index()).
           addClass('active');

//      $('#menu li').removeClass('active');
//      $(this).addClass('active')
//
//      $('#panel .panel').removeClass('active').eq($(this).index()).
//      Class('active');
		$('#pannel .pannel').hide().eq($(this).index()).toggle();

    })


});
})
